<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于nice_page分页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/nicePage.js"></script>
    <style>
        .layui-table td, .layui-table th{
            text-align: center;
        }
        #pageBar{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="main_box" style="width: 80%;margin: 0 auto">
        <div id="table"></div>
        <div id="pageBar"></div>
    </div>
<!--   // <script type="text/javascript" src="data/data.json"></script>-->
    <script>
        var json;
        var nameList = ["序号","姓名","年龄"];
        var widthList = ['30%','30%','30%'];
        $(function(){
            $.ajax({
                url:"data/data.json",
                type:"get",
                async: false,
                success:function(res){
                    json = res.list;
                    console.log(json);
                },
                error:function(){
                    layer.msg("读取数据失败");
                }
            });
            nicePage.setCfg({
                table: 'table',
                bar: 'pageBar',
                limit:10,
                color: "#256456",
                layout:['count','prev','page','next','limit','skip']
            });
        })
    </script>
</body>
</html>